<template>
	<div id="top" class="clearfix">
		<p class='sales'  v-bind:class="{'active':!isActive}" @touchend="sales">销量</p>
		<p class='dis' v-bind:class="{'active':isActive}" @touchend="show_sort">
		{{ sort_name }} 
			<span class='iconfont' v-bind:class="[sort_bol ? 'icon-up3' : 'icon-down4']"></span>
		</p>
		<ul class='sort' v-show='sort_bol'>
			<li v-for='name in arr2' @touchend="sort($index)">
				{{ name }}
			</li>
		</ul>
	</div>
	
	<div id="bottom" class="clearfix">
		<span v-show='content_bol' class="explain">所有分类</span>
		<div class="select" v-on:touchend='show_content()'>
			<span class="iconfont" v-bind:class="[content_bol ? 'icon-top' : 'icon-down']"></span>
		</div>

		<div class="nav" v-show='!content_bol'>
			
			<div class="wrap" @touchstart="moveStart" @touchend="moveEnd" @touchmove='move'>
				
				<span v-for='item in arr'>
					{{ item }}
				</span>
				
				<p class="bar"></p>
			</div>
		</div>
		
		
	</div>
	<ul id="content" v-show='content_bol'>
		<li v-for='item in arr'>
			<p>
				{{ item }}
			</p>
		</li>
	</ul>
</template>

<script>
	const arr = ['为你推荐','食品','女装','男装','鞋靴','箱包','内衣配件','手机数码','母婴','百货','珠宝配饰','运动户外','家电','美妆','家装','家居家纺','整车车品','鲜花宠物','图书乐器','飞猪','生活服务','游戏动漫'];	
	const arr2 = ['综合','信用','价格从高到低','价格从低到高'];
	const arr3 = ['综合','信用','高到低','低到高'];
	export default {
		data:function(){
			return {
				'isActive':true,
				'arr':arr,
				'arr2':arr2,
				'sort_name':'综合',
				'sort_bol':false,
				'content_bol':false,
				'moveSite':0,
				'startSite':0,
				'gap':0,
				'gapTime':0,
				'site':0,
				'time':0,
			}
		},
		ready:function(){
			//JQ放在ready里面使用
		},
		methods:{
			sort:function(index){
				this.sort_name = arr3[index];
				this.sort_bol = false;
			},
			show_sort:function(){
				//vue的this真TM不好用
				this.sort_bol = !this.sort_bol;
				this.isActive = true;
			},
			show_content:function(){
				this.content_bol = !this.content_bol;
			},
			sales:function(){
				this.sort_bol = false;
				this.isActive = false;
			},
			moveStart:function(event){
				this.moveSite = event.touches[0].pageX;
				this.startSite = event.touches[0].pageX;
				let date = new Date();
				this.time = date.getTime();
			},
			moveEnd:function(event){
				let _this = this;
				let wrap = document.querySelector('#bottom .wrap');
				var v = this.gap*50/this.gapTime;
				var t = Math.abs(v/5);
				var change = 20*t*t/2;
				start_move(_this,change,t);
				// console.log(this.gap,this.gapTime);

				// wrap.style.transform = "translateX("+this.site+"px)";
			},
			move:function(event){
				let site = event.touches[0].pageX;
				let date = new Date();
				this.gapTime = date.getTime()-this.time;
				this.time += this.gapTime;
				this.gap = site - this.moveSite;
				this.moveSite = site;
				this.site += this.gap;
				let wrap = document.querySelector('#bottom .wrap');
				wrap.style.transform = "translateX("+this.site+"px)";
			}
		}
	}

	function start_move(obj,change,endT) {
		console.log(obj,change,endT)
		let wrap = document.querySelector('#bottom .wrap');
		var start = 0;
		var change = change;
		var t = 0;
		var endT = endT;
		move();
		function move(){
			t++;
			if (t<endT) {
				var n = easeout(t,start,change,endT);
				// obj[site] += n;
				console.log(n)
				// wrap.style.transform = "translateX(" + obj[site] +"px)";
				requestAnimationFrame(move);
			}
		}
		function easeout(t,b,c,d){
	 		return c*((t=t/d-1)*t*t + 1) + b;
		}
	}

</script>

<style lang='less'>
	#top{
		width:100%;
		padding:0.13rem 0.1rem 0 0.1rem;
		font-size:0.16rem;
		color:#666;
		position:fixed;
		background: #fff;
		top:0.43rem;
		z-index: 99;
		.sales{
			position:absolute;
			top:0.13rem;left:0.95rem;
		}
		.dis{
			/*padding-left:e("calc(50% - 0.17rem)");*/
			width:0.8rem;
			span{
				display:inline-block;
				font-size:0.05rem;
				transform:scale(0.5) translateX(-50%);
			}
		}
		.sort{
			background: #fff;
			width:100%;
			position: fixed;
			top:0.74rem;left:0;
			padding-left:0.1rem;
			li{	
				/*padding-left:e("calc(50% - 0.17rem)");*/
				line-height: 0.25rem;
				border-top:1px solid rgba(0,0,0,0.15);
				&:last-child{
					border-bottom:1px solid rgba(0,0,0,0.15);
				}
			}
		}
		.active{
			color:#f29004;
		}
	}
	#bottom{
		border-top:1px solid rgba(0,0,0,0.15);
		border-bottom:1px solid rgba(0,0,0,0.15);
		background: #fff;
		margin-top:0.74rem;
		font-size: 0.14rem;
		.explain{
			color:#adadad;
			margin-left:0.1rem;
			line-height: 0.28rem;
		}
		.nav{
			overflow: hidden;
			/*font-size: 0.14rem;*/
			.wrap{
				width:15rem;
				span{
					display: inline-block;
					padding: 0.05rem 0.08rem;
				}
				.bar{
					width:0.1rem;height:0.02rem;
					background: red;
				}
			}
		}
		.select{
			width:0.3rem;
			box-sizing: border-box;
			border-left:1px solid rgba(0,0,0,0.15);
			height:0.28rem;
			float: right;
			text-align: center;
			font-size: 0.01rem;
			color:#adadad;
			span{
				position:relative;
				top:0.03rem;
			}
		}
	}
	#content{
		padding:0.28rem 0.1rem 0 0.1rem;
		background:#fff;
		display: flex;
		flex-wrap:wrap;
		box-shadow: 1px 3px 5px 1px #d8d7d7;
		/*flex子元素百分比会自动把padding去掉*/
		li{	
			width:25%;
			display: flex;
	  		justify-content: center;
	  		margin-bottom: 0.18rem;
	  		color:#333;
			p{
				width:0.71rem;height:0.28rem;
				line-height: 0.28rem;
				text-align: center;
				font-size:0.15rem;
				background:#f2f2f2;
				border-radius: 4px;
			}
			
		}
	}
</style>